<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(2)" class="layui-nav m-pl-sm m-pr-sm" lay-filter="">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item layui-this"><a href=""><i
            class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>

</ul>

<!-- 内容 -->
<div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">
    <!-- 二级菜单 -->
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 m-tac">
                        <li class="m-btn-showType"
                            th:classappend="${showType == 1 ? 'layui-this' : ''}" data-value="1"
                            style="font-size: 18px!important;">正在热映
                        </li>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 m-tac">
                        <li class="m-btn-showType"
                            th:classappend="${showType == 2 ? 'layui-this' : ''}" data-value="2"
                            style="font-size: 18px!important;">即将上映
                        </li>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 m-tac">
                        <li class="m-btn-showType"
                            th:classappend="${showType == 3 ? 'layui-this' : ''}" data-value="3"
                            style="font-size: 18px!important;">经典影片
                        </li>
                    </div>
                </ul>
                <div class="layui-tab-content m-mlr">
                    <!-- 面板 -->
                    <div class="layui-panel" style="padding: 30px;">
                        <!-- 类型 -->
                        <div class="layui-row">
                            <div class="layui-col-xs3 layui-col-sm2 layui-col-md1">
                                类型:
                            </div>
                            <div class="layui-col-xs9 layui-col-sm10 layui-col-md11">
                                <a data-value="0" style="display: inline-block;">
                                    <div class="m-btn m-btn-type" th:classappend="${typeId == 0 ? 'm-btn-active' : ''}">
                                        全部
                                    </div>
                                </a>
                                <a th:each="type: ${movieTypes}" style="display: inline-block;">
                                    <div th:data-value="${type.id}" th:text="${type.name}"
                                         class="m-btn m-btn-type"
                                         th:classappend="${typeId == type.id ? 'm-btn-active' : ''}">
                                        爱情
                                    </div>
                                </a>

                            </div>
                        </div>
                        <hr>
                        <!-- 区域 -->
                        <div class="layui-row">
                            <div class="layui-col-xs3 layui-col-sm2 layui-col-md1">
                                区域:
                            </div>
                            <div class="layui-col-xs9 layui-col-sm10 layui-col-md11">
                                <a style="display: inline-block;">
                                    <div class="m-btn m-btn-area" th:classappend="${areaId == 0 ? 'm-btn-active' : ''}">
                                        全部
                                    </div>
                                </a>
                                <a th:each="area: ${movieAreas}" style="display: inline-block;">
                                    <div th:data-value="${area.id}" th:text="${area.name}"
                                         class="m-btn m-btn-area"
                                         th:classappend="${areaId == area.id ? 'm-btn-active' : ''}">
                                        大陆
                                    </div>
                                </a>

                            </div>
                        </div>
                        <hr>
                        <!-- 年代 -->
                        <div class="layui-row">
                            <div class="layui-col-xs3 layui-col-sm2 layui-col-md1">
                                年代:
                            </div>
                            <div class="layui-col-xs9 layui-col-sm10 layui-col-md11">
                                <a href="#" style="display: inline-block;">
                                    <div class="m-btn m-btn-age" th:classappend="${ageId == 0 ? 'm-btn-active' : ''}">
                                        全部
                                    </div>
                                </a>
                                <a th:each="age: ${movieAges}" style="display: inline-block;">
                                    <div th:data-value="${age.id}" th:text="${age.name}"
                                         class="m-btn m-btn-age"
                                         th:classappend="${ageId == age.id ? 'm-btn-active' : ''}">
                                        2023
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 排序规则 -->
                    <div class="layui-form layui-form-item">
                        <div class="layui-input-block">
                            <input type="radio" name="order" value="time" title="按时间排序" checked>
                            <input type="radio" name="order" value="score" title="按评价排序">
                        </div>
                    </div>
                    <div id="table-container">
                        <!-- 电影信息 -->
                        <div th:fragment="movieList" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                            <!-- 卡片 -->
                            <div th:each="movie : ${moviePage.records}"
                                 class="layui-col-xs4 layui-col-sm3 layui-col-md2 m-pr-normal m-pb-normal">
                                <a th:href="@{/movie/{id}(id=${movie.id})}">
                                    <img th:src="${movie.poster}" width="100%">
                                    <div th:text="${movie.name}" class="m-pb-normal m-pt-normal"
                                         style="text-align: center;">送你一朵小红花
                                    </div>
                                    <div th:text="${movie.movieRate.score}" class="m-tc-yellow m-ts-normal"
                                         style="text-align: center;">8.0
                                    </div>
                                </a>
                            </div>
                            <!-- 没有数据提示-->
                            <th:block th:if="${moviePage.records.size() == 0}">
                                没有数据...
                            </th:block>
                            <!--分页条-->
                            <div class="layui-row layui-box layui-laypage layui-laypage-default"
                                 style="width: 100% ;text-align: center">
                                <a th:data-pageNo="${moviePage.current - 1}"
                                   class="layui-laypage-prev page-link"
                                   th:classappend="${!moviePage.hasPrevious()} ? 'layui-disabled'">上一页</a>
                                <!-- 最多显示五个页码按钮-->
                                <!-- 小于等于5页，全部显示-->
                                <th:block th:if="${moviePage.getPages() <= 5}">
                                    <!--考虑一页都没有的情况-->
                                    <th:block th:if="${moviePage.getPages() > 0}">
                                        <a th:each="i : ${#numbers.sequence(1,moviePage.getPages())}" class="page-link"
                                           th:classappend="${i == moviePage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </th:block>
                                </th:block>
                                <!-- 大于5页，分情况-->
                                <th:block th:if="${moviePage.getPages() > 5}">
                                    <!-- 后面有两页及以上-->
                                    <th:block th:if="${moviePage.getPages() >= moviePage.current + 2}">
                                        <!-- no < 3 不居中-->
                                        <th:block th:if="${moviePage.current < 3}">
                                            <a th:each="i : ${#numbers.sequence(1, 5)}" class="page-link"
                                               th:classappend="${i == moviePage.current} ? 'active'"
                                               th:data-pageNo="${i}" th:text="${i}"></a>
                                        </th:block>
                                        <!-- 大于2可居中-->
                                        <th:block th:if="${moviePage.current >= 3}">
                                            <a th:each="i : ${#numbers.sequence(moviePage.current - 2, moviePage.current + 2)}"
                                               class="page-link"
                                               th:classappend="${i == moviePage.current} ? 'active'"
                                               th:data-pageNo="${i}" th:text="${i}"></a>
                                        </th:block>
                                    </th:block>
                                    <!-- 当前页码后面不足两页-->
                                    <th:block th:if="${moviePage.getPages() < moviePage.current + 2}">
                                        <a th:each="i : ${#numbers.sequence(moviePage.getPages() - 4, moviePage.getPages())}"
                                           class="page-link"
                                           th:classappend="${i == moviePage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </th:block>
                                </th:block>
                                <a th:data-pageNo="${moviePage.current + 1}" class="layui-laypage-next page-link"
                                   th:classappend="${!moviePage.hasNext()} ? 'layui-disabled'">下一页</a>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    function page(pageNo) {
        var showType = $('.m-btn-showType.layui-this').data('value')
        var typeId = $('.m-btn-type.m-btn-active').data('value')
        if (typeId == 0) {
            typeId = null
        }
        var ageId = $('.m-btn-age.m-btn-active').data('value')
        if (ageId == 0) {
            ageId = null
        }
        var areaId = $('.m-btn-area.m-btn-active').data('value')
        if (areaId == 0) {
            areaId = null
        }
        //加载数据
        $("#table-container").load(/*[[@{/movie}]]*/"/movie", {
            showType: showType,
            typeId: typeId,
            ageId: ageId,
            areaId: areaId,
            pageNo: pageNo,
            pageSize: 10
        });
    }


    //点击分页按钮
    function clickPageItem(obj) {
        if ($(obj).hasClass('active')) {
            return
        }
        var pageNo = $(obj).data('pageno')
        page(pageNo)
    }

    $(function () {
        layui.use(function () {
            var layer = layui.layer
                , form = layui.form,
                element = layui.element,
                carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#carousel1'
                , width: '100%' //设置容器宽度
                , height: '300px'
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
            // layer.msg('Hello World');
        });
        //分页条按钮点击事件
        $("#table-container").on('click', '.page-link', function () {
            clickPageItem(this)
        })

        //showType : 正在热映/即将上映/经典电影
        $(".m-btn-showType").click(function () {
            if ($(this).hasClass('layui-this')) {
                return
            }
            //样式
            $(".m-btn-showType").removeClass('layui-this')
            $(this).addClass('layui-this')
            page(1)
        })

        //类型
        $(".m-btn-type").click(function () {
            if ($(this).hasClass('m-btn-active')) {
                return
            }
            //样式
            $(".m-btn-type").removeClass('m-btn-active')
            $(this).addClass('m-btn-active')
            page(1)
        })
        //区域
        $(".m-btn-area").click(function () {
            if ($(this).hasClass('m-btn-active')) {
                return
            }
            //样式
            $(".m-btn-area").removeClass('m-btn-active')
            $(this).addClass('m-btn-active')
            page(1)
        })
        //年代
        $(".m-btn-age").click(function () {
            if ($(this).hasClass('m-btn-active')) {
                return
            }
            //样式
            $(".m-btn-age").removeClass('m-btn-active')
            $(this).addClass('m-btn-active')
            page(1)
        })
    })

</script>
</body>

</html>